<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理页面</title>

    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--    <link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">-->
    <style>
        /* 整体布局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        #app {
            display: flex;
            height: 100vh;
        }

        /* 侧边栏样式 */
        .sidebar {
            width: 200px;
            background-color: rgb(238, 241, 246);
            border-right: 1px solid #eee;
            box-sizing: border-box;
        }

        .sidebar-menu {
            padding-top: 20px;
        }

        .sidebar-menu-item {
            margin-bottom: 10px;
            cursor: pointer;
        }

        /* 主内容区样式 */
        .main-content {
            flex: 1;
            padding: 20px;
            box-sizing: border-box;
        }

        /* 表格样式 */
        .table-container {
            margin-top: 20px;
            padding: 20px;
        }

        .table-container {
            margin-top: 20px;
        }

        /* 分页样式 */
        .pagination {
            margin-top: 20px;
            text-align: right;
        }

        /* 偶数行样式 */
        .even-row {
            background-color: #f5f5f5; /* 设置偶数行的背景色 */
        }

        /* 奇数行样式 */
        .odd-row {
            background-color: #ffffff; /* 设置奇数行的背景色 */
        }

        .record-row-read {
            background-color: #F9EAAB !important; /* 设置已读状态行的背景色 */
        }

    </style>
</head>
<body>

<div id="app">
    <div class="sidebar">
        <el-menu class="sidebar-menu">
            <el-submenu index="1">
                <template slot="title">
                    <div class="sidebar-menu-item" @click="clickMenu = 1">
                        <i class="el-icon-s-platform"></i>
                        首页
                    </div>
                </template>
            </el-submenu>

            <el-submenu index="2">
                <template slot="title">
                    <div class="sidebar-menu-item" @click="clickMenu = 2">
                        <i class="el-icon-menu"></i>
                        告警规则
                    </div>
                </template>
            </el-submenu>

            <el-submenu index="3">
                <template slot="title">
                    <div class="sidebar-menu-item" @click="clickMenu = 3">
                        <i class="el-icon-setting"></i>
                        监控指标
                    </div>
                </template>
            </el-submenu>

            <el-submenu index="4">
                <template slot="title">
                    <div class="sidebar-menu-item" @click="clickMenu = 4">
                        <i class="el-icon-setting"></i>
                        监控数据
                    </div>
                </template>
            </el-submenu>

            <el-submenu index="5">
                <template slot="title">
                    <div class="sidebar-menu-item" @click="clickMenu = 5">
                        <i class="el-icon-setting"></i>
                        告警信息
                    </div>
                </template>
            </el-submenu>
        </el-menu>
    </div>

    <div class="main-content">
        <!-- 首页内容 -->
        <div v-show="clickMenu == 1">
            <img src="../assets/ks.png">
        </div>

        <!-- 告警规则内容 -->
        <div v-show="clickMenu == 2" class="table-container">
            <el-row>
                <el-button type="primary" plain @click="openDialog">新增</el-button>
            </el-row>

            <!--添加数据对话框表单-->
            <el-dialog
                    title="编辑规则信息"
                    :visible.sync="dialogVisible"
                    width="30%"
            >

                <el-form ref="form" :model="rule" label-width="80px">
                    <el-form-item label="规则名称">
                        <el-input v-model="rule.name"></el-input>
                    </el-form-item>

                    <el-form-item label="指标名称">
                        <el-select v-model="rule.indicatorName" v-if="indicatorNames.length > 0">
                            <el-option
                                    v-for="indicator in indicatorNames"
                                    :key="indicator"
                                    :label="indicator"
                                    :value="indicator">
                            </el-option>
                        </el-select>
                        <el-input v-model="rule.indicatorName"></el-input>
                    </el-form-item>

                    <el-form-item label="告警类型">
                        <!--                        <el-select v-model="rule.type">-->
                        <!--                            <el-option label="实时" value="实时"></el-option>-->
                        <!--                            <el-option label="定时" value="定时"></el-option>-->
                        <!--                        </el-select>-->
                        <el-radio-group v-model="rule.type">
                            <el-radio-button label="实时" value="实时"></el-radio-button>
                            <el-radio-button label="定时" value="定时"></el-radio-button>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="聚合操作">
                        <el-select v-model="rule.aggregate" v-if="rule.type == '定时'">
                            <el-option label="不使用" value=""></el-option>
                            <el-option label="avg" value="avg"></el-option>
                            <el-option label="max" value="max"></el-option>
                            <el-option label="min" value="min"></el-option>
                            <el-option label="sum" value="sum"></el-option>
                            <el-option label="rate" value="rate"></el-option>
                        </el-select>
                        <el-select v-model="rule.aggregateTime" v-if="rule.aggregate != ''&&rule.type == '定时'">
                            <el-option label="30S" value="30"></el-option>
                            <el-option label="1M" value="60"></el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="运算符">
                        <el-select v-model="rule.symbol">
                            <el-option label=">" value=">"></el-option>
                            <el-option label="<" value="<"></el-option>
                            <el-option label="=" value="=="></el-option>
                            <el-option label=">=" value=">="></el-option>
                            <el-option label="<=" value="<="></el-option>
                            <el-option label="!=" value="!="></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="阈值">
                        <el-input v-model="rule.parameter"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="addorUpdateRule">提交</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>

            <!--表格-->
            <el-table :data="rules" stripe row-class-name="rowClassName" style="width: 100%"
                      @selection-change="handleSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <el-table-column prop="name" label="规则名称" align="center"></el-table-column>
                <el-table-column prop="indicatorName" label="指标名称" align="center"></el-table-column>
                <el-table-column prop="type" label="告警类型" align="center"></el-table-column>
                <el-table-column prop="aggregate" label="聚合操作" width="100px"></el-table-column>
                <el-table-column prop="aggregateTime" label="聚合时间" width="100px"></el-table-column>
                <el-table-column prop="symbol" label="运算逻辑" align="center"></el-table-column>
                <el-table-column prop="parameter" label="阈值"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button type="primary" icon="el-icon-edit" size="mini"
                                       @click="updateRule(scope.row)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini"
                                       @click="deleteRule(scope.row)"></el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div v-show="clickMenu == 2" class="pagination" v-if="rules && rules.length">
            <el-pagination
                    @size-change="ruleshandleSizeChange"
                    @current-change="ruleshandleCurrentChange"
                    :current-page="rulecurrentPage"
                    :page-sizes="[5, 10, 15, 20, 25, 30]"
                    :page-size="15"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="Rulestotalcount">
            </el-pagination>
        </div>

        <!-- 监控指标内容 -->
        <div v-show="clickMenu == 3">

            <!--添加按键-->
            <el-row>
                <el-button type="primary" plain @click="openDialog2">新增</el-button>
            </el-row>

            <!--添加数据对话框表单-->
            <el-dialog
                    title="编辑指标内容"
                    :visible.sync="dialog2Visible"
                    width="30%">

                <el-form ref="form" :model="indicator" label-width="80px">
                    <el-form-item label="指标名称">
                        <el-input v-model="indicator.name"></el-input>
                    </el-form-item>

                    <el-form-item label="指标类别">
                        <el-input v-model="indicator.category"></el-input>
                    </el-form-item>

                    <el-form-item label="描述">
                        <el-input v-model="indicator.description"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="addorUpdateIndicator">提交</el-button>
                        <el-button @click="dialog2Visible = false">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>

            <!--表格-->
            <el-table :data="indicators" stripe style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <el-table-column prop="name" label="名称" align="center"></el-table-column>
                <el-table-column prop="category" label="类型" align="center"></el-table-column>
                <el-table-column prop="description" label="描述" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button type="primary" icon="el-icon-edit" size="mini"
                                       @click="updateIndicator(scope.row)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini"
                                       @click="deleteIndicator(scope.row)"></el-button>
                            <el-button type="primary" icon="el-icon-data-line" size="mini"
                                       @click="showChart(scope.row)"></el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog :title="chartTitle" :visible.sync="showChartFlag"  @close="closeChart" width="70%">
                <canvas id="myChart"></canvas>
                <div class="pagination">
                    <el-pagination
                            @size-change="chartSizeChange"
                            @current-change="chartCurrentChange"
                            :current-page="chartCurrentChange"
                            :page-sizes="[20, 30, 40, 50]"
                            :page-size="30"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="chartDatacount">
                    </el-pagination>
                </div>
            </el-dialog>


        </div>

        <div v-show="clickMenu == 3" class="pagination" v-if="indicators && indicators.length">
            <el-pagination
                    @size-change="IndicatorshandleSizeChange"
                    @current-change="IndicatorshandleCurrentChange"
                    :current-page="indicatorcurrentPage"
                    :page-sizes="[10, 15, 20, 25, 30]"
                    :page-size="15"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="Indicatortotalcount">
            </el-pagination>
        </div>


        <div v-show="clickMenu == 4">
            <el-table :data="metrics" stripe style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <el-table-column prop="metric" label="指标"></el-table-column>
                <el-table-column prop="instanceId" label="instanceId"></el-table-column>
                <el-table-column prop="hostname" label="hostname"></el-table-column>
                <el-table-column prop="timestamp" label="时间戳"></el-table-column>
                <el-table-column prop="value" label="值"></el-table-column>
            </el-table>
        </div>
        <div v-show="clickMenu == 4" class="pagination" v-if="metrics && metrics.length">
            <el-pagination
                    @size-change="metricshandleSizeChange"
                    @current-change="metricshandleCurrentChange"
                    :current-page="metriccurrentPage"
                    :page-sizes="[10, 15, 20, 25, 30]"
                    :page-size="20"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="Metricstotalcount">
            </el-pagination>
        </div>

        <div v-show="clickMenu == 5" class="table-container">
            <el-table :data="records" style="width: 100%" @selection-change="handleSelectionChange"
                      :row-class-name="RecordRowClassName">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="id" label="ID" align="center" width="100px"></el-table-column>
                <el-table-column prop="hostname" label="Hostname"></el-table-column>
                <el-table-column prop="instanceId" label="Instance ID"></el-table-column>
                <el-table-column prop="type" label="告警类型" width="70px"></el-table-column>
                <el-table-column prop="indicatorType" label="告警指标" width="200px"></el-table-column>
                <el-table-column prop="triggerCondition" label="告警触发条件" width="500px"></el-table-column>
                <el-table-column prop="triggerValue" label="告警值" width="100px"></el-table-column>
                <el-table-column prop="occurTime" label="发生时间"></el-table-column>
                <el-table-column prop="dealTime" label="处理时间"></el-table-column>
                <el-table-column prop="status" label="状态" width="50px"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button type="primary" icon="el-icon-view" size="mini"
                                       @click="readRecord(scope.row)"></el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div v-show="clickMenu == 5" class="pagination" v-if="records && records.length">
            <el-pagination
                    @size-change="recordshandleSizeChange"
                    @current-change="recordshandleCurrentChange"
                    :current-page="recordcurrentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="WarnRecordtotalcount">
            </el-pagination>
        </div>

    </div>
</div>

<!-- 引入 Vue、Axios、Element UI JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    new Vue({
        el: "#app",
        mounted() {
            this.getWarnRecord();
            this.getRules();
            this.getIndicators();
            this.getMetrics();

            // 设置定时器，每隔一段时间刷新数据
            setInterval(() => {
                if (this.clickMenu == 1) {

                } else if (this.clickMenu == 2) {
                    this.getRules();
                } else if (this.clickMenu == 3) {
                    this.getIndicators();
                } else if (this.clickMenu == 4) {
                    this.getMetrics();
                } else if (this.clickMenu == 5) {
                    this.getWarnRecord();
                }
                if(this.showChartFlag){
                    this.showChart(this.nowMetricData);
                }
            }, 1000); // 每隔 1 秒刷新一次数据
        },
        data() {
            return {
                url: "http://localhost:8000/api",
                rulespagedto: {
                    "page": 1,
                    "pageSize": 15
                },
                indicatorspagedto: {
                    "page": 1,
                    "pageSize": 15
                },
                metricspagedto: {
                    "page": 1,
                    "pageSize": 20
                },
                recordspagedto: {
                    "page": 1,
                    "pageSize": 10
                },
                chartspagedto: {
                    "page": 1,
                    "pageSize": 30
                },
                indicatorNames: [],
                rules: null,
                indicators: null,
                records: null,
                metrics: null,
                //复选框选择的行的数据
                multipleSelection: [],
                //数据数量
                WarnRecordtotalcount: 0,
                Indicatortotalcount: 0,
                Metricstotalcount: 0,
                Rulestotalcount: 0,
                chartDatacount: 0,
                //当前页码
                recordcurrentPage: 1,
                metriccurrentPage: 1,
                rulecurrentPage: 1,
                indicatorcurrentPage: 1,
                chartcurrentPage: 1,
                //当前页码
                //当前选中的菜单
                clickMenu: 1,
                //添加数据对话框的状态
                dialogVisible: false,
                dialog2Visible: false,
                //添加数据对话框的表单数据
                rule: {
                    "name": "",
                    "indicatorName": "",
                    "type": "",
                    "symbol": "",
                    "parameter": "",
                    "aggregate": "",
                    "aggregateTime": 0,
                    // "status": 1
                },
                //添加数据对话框的表单数据
                indicator: {
                    "name": "",
                    "category": "",
                    "description": "",
                },
                metricData: {
                    "metric": "",
                    "values": null,
                },
                showChartFlag: false,
                metricDataTime: null,
                chartTitle: null,
                nowMetricData: null,
            }
        },
        methods: {
            showChart(row) {
                this.showChartFlag = true;
                try {
                    let _this = this;
                    this.nowMetricData = row;
                    axios({
                        method: "post",
                        url: `${this.url}/metric/chart/${row.name}`,
                        data: this.chartspagedto
                    }).then(response => {
                        const newData = response.data.data.records;
                        _this.chartDatacount = response.data.data.total;
                        // 检查新数据是否与旧数据不同
                        if (JSON.stringify(newData) !== JSON.stringify(_this.metricData)) {
                            _this.metricData = newData;
                            // 提取 value 和 timestamp
                            const values = _this.metricData.map(data => data.value);
                            const timestamps = _this.metricData.map(data => data.timestamp.slice(11, 19));
                            this.metricDataTime = _this.metricData[0].timestamp.slice(0, 10);
                            this.chartTitle = this.metricDataTime + ' 监控数据曲线';

                            if (_this.myChart) {
                                // 更新图表数据
                                _this.myChart.data.labels = timestamps;
                                _this.myChart.data.datasets[0].data = values;
                                _this.myChart.data.datasets[0].label = row.name;
                                _this.myChart.update(); // 更新图表
                            } else {
                                // 创建新的图表
                                let ctx = document.getElementById('myChart').getContext('2d');
                                _this.myChart = new Chart(ctx, {
                                    type: 'line',
                                    data: {
                                        labels: timestamps, // x轴标签
                                        datasets: [{
                                            label: row.name,
                                            data: values, // y轴数据
                                            backgroundColor: 'rgba(155, 247, 175)',
                                            borderColor: 'rgba(255, 99, 132, 1)',
                                            borderWidth: 2
                                        }]
                                    },
                                    options: {
                                        scales: {
                                            xAxes: [{
                                                type: 'time',
                                            }],
                                            yAxes: [{
                                                type: 'linear', // y轴类型
                                                ticks: {
                                                    beginAtZero: true // y轴从0开始
                                                }
                                            }]
                                        }
                                    }
                                });
                            }
                        }
                    }).catch(error => {
                        console.error('Error fetching data:', error);
                    });

                } catch (error) {
                    console.error('Error fetching data:', error);
                }
            },



            closeChart() {
                this.showChartFlag = false;
                // 清空数据
                this.metricData = [];
            },
            getRules() {
                let _this = this;
                axios({
                    method: "post",
                    url: `${this.url}/rule/list`,
                    data: this.rulespagedto
                }).then(function (response) {
                    _this.rules = response.data.data.records;
                    _this.Rulestotalcount = response.data.data.total;
                })
            },
            getIndicators() {
                let _this = this;
                axios({
                    method: "post",
                    url: `${this.url}/indicator/list`,
                    data: this.indicatorspagedto
                }).then(function (response) {
                    _this.indicators = response.data.data.records;
                    _this.Indicatortotalcount = response.data.data.total;
                })
            },
            getMetrics() {
                let _this = this;
                axios({
                    method: "post",
                    url: `${this.url}/metric/list`,
                    data: this.metricspagedto
                }).then(function (response) {
                    _this.metrics = response.data.data.records;
                    _this.Metricstotalcount = response.data.data.total;
                })
            },
            getWarnRecord() {
                let _this = this;
                axios({
                    method: "post",
                    url: `${this.url}/warnRecord/list`,
                    data: this.recordspagedto
                }).then(function (response) {
                    _this.records = response.data.data.records;
                    _this.WarnRecordtotalcount = response.data.data.total;
                })
            },
            fetchIndicators() {
                let _this = this;
                // 发送 GET 请求到后端获取指标名称列表
                axios({
                    method: "get",
                    url: `${this.url}/indicator/nameList`
                }).then(response => {
                    // 请求成功，填充指标名称列表
                    _this.indicatorNames = response.data.data;
                }).catch(error => {
                    console.error('Error fetching indicator names:', error);
                })
            },
            chartSizeChange(val) {
                this.chartspagedto.pageSize = val;
                if (this.nowMetricData != null ) {
                    this.showChart(this.nowMetricData);
                }
            },
            chartCurrentChange(val) {
                this.chartcurrentPage = val;
                this.chartspagedto.page = val;
                // TODO: 确保 multipleSelection 中有选中的项
                if (this.nowMetricData != null ) {
                    this.showChart(this.nowMetricData);
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            recordshandleSizeChange(val) {
                this.recordspagedto.pageSize = val;
            },
            recordshandleCurrentChange(val) {
                this.recordcurrentPage = val;
                this.recordspagedto.page = val;
                this.getWarnRecord();
            },
            ruleshandleSizeChange(val) {
                this.rulespagedto.pageSize = val;
            },
            ruleshandleCurrentChange(val) {
                this.rulecurrentPage = val;
                this.rulespagedto.page = val;
                this.getRules();
            },
            IndicatorshandleSizeChange(val) {
                this.indicatorspagedto.pageSize = val;
            },
            IndicatorshandleCurrentChange(val) {
                this.indicatorcurrentPage = val;
                this.indicatorspagedto.page = val;
                this.getIndicators();
            },
            metricshandleSizeChange(val) {
                this.metricspagedto.pageSize = val;
            },
            metricshandleCurrentChange(val) {
                this.metriccurrentPage = val;
                this.metricspagedto.page = val;
                this.getMetrics();
            },
            openDialog() {
                //清理规则表单数据
                this.fetchIndicators();
                this.rule = {};
                this.dialogVisible = true;
            },
            openDialog2() {
                //清理表单数据
                this.indicator = {};
                this.dialog2Visible = true;
            },
            addorUpdateRule() {
                if (this.rule.id) {
                    let _this = this;
                    axios({
                        method: "put",
                        url: `${this.url}/rule`,
                        data: _this.rule
                    }).then(function (response) {
                        console.log(response);
                        _this.dialogVisible = false;
                        _this.getRules();
                        // 弹出消息提示
                        _this.$message({
                            message: '恭喜你，修改成功',
                            type: 'success'
                        });
                    })
                } else {
                    let _this = this;
                    axios({
                        method: "post",
                        url: `${this.url}/rule`,
                        data: _this.rule
                    }).then(function (response) {
                        console.log(response);
                        _this.dialogVisible = false;
                        _this.getRules();
                        // 弹出消息提示
                        _this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                    })
                }
            },
            updateRule(row) {
                // console.log(row);
                this.rule = JSON.parse(JSON.stringify(row));
                this.dialogVisible = true;
            },
            deleteRule(row) {
                // console.log(row);
                var _this = this;
                axios({
                    method: "delete",
                    url: `${this.url}/rule/${row.id}`
                }).then(function (response) {
                    console.log(response);
                    _this.getRules();
                    _this.$message({
                        message: '恭喜你，删除成功',
                        type: 'success'
                    });
                })
            },
            addorUpdateIndicator() {
                if (this.indicator.id) {
                    let _this = this;
                    axios({
                        method: "put",
                        url: `${this.url}/indicator`,
                        data: _this.indicator
                    }).then(function (response) {
                        console.log(response);
                        _this.dialog2Visible = false;
                        _this.getIndicators();
                        // 弹出消息提示
                        _this.$message({
                            message: '恭喜你，修改成功',
                            type: 'success'
                        });
                    })
                } else {
                    let _this = this;
                    axios({
                        method: "post",
                        url: `${this.url}/indicator`,
                        data: _this.indicator
                    }).then(function (response) {
                        console.log(response);
                        _this.dialog2Visible = false;
                        _this.getIndicators();
                        // 弹出消息提示
                        _this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                    })
                }
            },
            updateIndicator(row) {
                console.log(row);
                this.indicator = JSON.parse(JSON.stringify(row));
                this.dialog2Visible = true;
            },
            deleteIndicator(row) {
                console.log(row);
                var _this = this;
                axios({
                    method: "delete",
                    url: `${this.url}/indicator/${row.id}`
                }).then(function (response) {
                    console.log(response);
                    _this.getIndicators();
                    _this.$message({
                        message: '恭喜你，删除成功',
                        type: 'success'
                    });
                })
            },
            readRecord(row) {
                console.log(row);
                var _this = this;
                axios({
                    method: "put",
                    url: `${this.url}/warnRecord/${row.id}/read`
                }).then(function (response) {
                    console.log(response);
                    _this.getWarnRecord();
                    _this.$message({
                        message: '处理成功',
                        type: 'success'
                    });
                })
            },
            // 为表格的每一行设置不同样式的函数
            rowClassName({row, rowIndex}) {
                return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
            },
            RecordRowClassName({row}) {
                return row.status === '未读' ? 'record-row-read' : '';
            }
        }
    })

</script>
</body>
</html>
